<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
<div class="wrap">
  <div class="pop-mask" v-if="isShow" @click="handleClose" />
  <div class="modal" :style="{transform: `translateX(${isShow ? '0' : '550'}px)`}">
    <div class="head">
      <div class="title">{{title}}</div>
      <div class="delete" @click.stop="handleClose">
        <i class="el-icon-close" />
      </div>
    </div>
    <div class="body">
      <slot />
    </div>
    <div class="foot">
      <el-button size="small" round @click.stop="handleClose">取消</el-button>
      <el-button size="small" round type="primary" @click.stop="handleSave">保存</el-button>
    </div>
  </div>
</div>
</template>

<script>
import { nodeType } from '@/framework-code/utils/constants'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default: () => {}
    },
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    title() {
      const {
        taskName,
        type
      } = this.item

      if (taskName) {
        return taskName
      }

      switch (type) {
        case nodeType.USERTASK:
          return '办理人'
        case nodeType.CCTASK:
          return '抄送人'
        default:
          return '提交人'
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('on-close', false)
    },
    handleSave(e) {
      this.$emit('on-save', e)
    }
  },
  mounted() {
    if (this.isShow) {
      if (this.appendToBody) {
        document.body.appendChild(this.$el)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.pop-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.2);
}
.modal {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2001;
  width: 550px;
  background-color: #FFF;
  transition: all 300ms ease-in-out;
  transform: translateX(550px);
}
.head {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 25px;
  box-shadow: 0 1px 0 0 rgba(218, 218, 218, 0.5);
}
.title {
  flex: 1;
  width: auto;
}
.body {
  height: calc(100% - 100px);
  overflow: auto;
}
.foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 50px;
  padding-right: 25px;
  border-top: 1px solid rgba(218, 218, 218, 0.5);
}
</style>
